<template>
	<div id="addPassengerPage">
		<div class="top">
			<div v-show="success" class="resultTip success">添加成功</div>
			<div v-show="failed" class="resultTip failed">{{errorMsg}}</div>
			<div class="declaration">
				<p><span class='iconfont'>&#xe6e8; </span> 请正确填写各项信息<!--证件号及有效期，旅行结束日必须比证件到期日至少早6个月。姓名需完全按照证件照填写。--></p>
			</div>
			<div class="content">
				<ul>
					<li class="item" v-show="!type">
						<div class="title">
							<span class="main_title">中文姓名</span>
							<span class="fu_title"></span>
						</div>
						<div class="text">
							<mu-text-field v-model="chineseName" inputClass="textInput" fullWidth underlineClass="underline" underlineFocusClass="focusline" />
						</div>
						<div v-if="isInland">
							<mu-switch v-model="type" label="英" class="demo-switch" />
						</div>
					</li>
					<li class="item" v-show="type">
						<div class="title">
							<span class="main_title">姓(拼音)</span>
							<span class="fu_title">Surename</span>
						</div>
						<div class="text">
							<mu-text-field v-model="sureName" inputClass="textInput upcaseName" fullWidth underlineClass="underline" underlineFocusClass="focusline" />
						</div>
						<div v-if="isInland">
							<mu-switch v-model="type" label="英" class="demo-switch" />
						</div>
					</li>
					<li class="item" v-show="type">
						<div class="title">
							<span class="main_title">名(拼音)</span>
							<span class="fu_title">Givenname</span>
						</div>
						<div class="text">
							<mu-text-field v-model="givenName" inputClass="textInput upcaseName" fullWidth underlineClass="underline" underlineFocusClass="focusline" />
						</div>
						<div></div>
					</li>
					<li class="item" v-show="type">
						<div class="title">
							<span class="main_title">性别</span>
						</div>
						<div class="text">
							<mu-radio iconClass="radioIcon" label="男" name="sex" nativeValue="1" v-model="sex"  class="sexRadio"/>
							<mu-radio iconClass="radioIcon" label="女" name="sex" nativeValue="2" v-model="sex"  class="sexRadio"/>
						</div>
						<div></div>
					</li>
					<li class="item" v-show="type">
						<div class="title">
							<span class="main_title">国籍</span>
						</div>
						<div class="text">
							<mu-text-field v-model="nationality" inputClass="textInput" fullWidth underlineClass="underline" underlineFocusClass="focusline" />
						</div>
						<div></div>
					</li>
					<li class="item" v-show="type">
						<div class="title">
							<span class="main_title">出生日期</span>
						</div>
						<div class="text">
							<mu-date-picker v-model="birthDate" fullWidth autoOk underlineClass="bornDateBorder" inputClass="bornDate"/>
						</div>
						<div><span class="iconfont"></span></div>
					</li>
					
					<li class="item">
						<div class="title">
							<span class="main_title">旅客类型</span>
						</div>
						<div class="text">
							<mu-dropDown-menu underlineClass="underline" :value="passenger" @change="passengerType">
								<mu-menu-item value="1" title="成人" />
							</mu-dropDown-menu>
						</div>
						<div><span class="iconfont"></span></div>
					</li>
					<li class="item">
						<div class="title">
							<span class="main_title">证件类型</span>
						</div>
						<div class="text">
							<mu-dropDown-menu underlineClass="underline" :value="certificate" @change="certificateType">
								<mu-menu-item value="1" title="身份证" v-if="isInland"/>
								<mu-menu-item value="2" title="护照" />								
								<mu-menu-item value="3" title="港澳通行证" />
								<mu-menu-item value="4" title="台湾证" />
								<mu-menu-item value="5" title="回乡证" />
							</mu-dropDown-menu>
						</div>
						<div><span class="iconfont"></span></div>
					</li>
					<li class="item" v-show="type">
						<div class="title">
							<span class="main_title">证件有效期</span>
						</div>
						<div class="text">
							<mu-date-picker v-model="docExpireDate" fullWidth autoOk underlineClass="bornDateBorder" inputClass="bornDate"/>
						</div>
						<div><span class="iconfont"></span></div>
					</li>
					<li class="item">
						<div class="title">
							<span class="main_title">证件号码</span>
						</div>
						<div class="text">
							<mu-text-field v-model="docId" inputClass="textInput" fullWidth underlineClass="underline" underlineFocusClass="focusline" />
						</div>
						<div></div>
					</li>
					<li class="item" v-show="type">
						<div class="title">
							<span class="main_title">大陆手机</span>
						</div>
						<div class="text">
							<mu-text-field v-model="inlandMobile" inputClass="textInput" fullWidth underlineClass="underline" underlineFocusClass="focusline" />
						</div>
						<div></div>
					</li>
					<li class="item" v-show="!type">
						<div class="title">
							<span class="main_title">手机号码</span>
						</div>
						<div class="text">
							<mu-text-field v-model="mobile" inputClass="textInput" fullWidth underlineClass="underline" underlineFocusClass="focusline" />
						</div>
						<div></div>
					</li>	
				</ul>
			</div>
		</div>
		<div class="submit">
			<mu-raised-button @click="create" label="添加" secondary fullWidth/>
		</div>
	</div>
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	@import '../../style/mixin.scss';
	@import "./style.scss";
</style>